<template lang="pug">
div(class="circle-1 hold-m-c")
    div(class="circle-2 hold-m-c")
        div(class="circle-3 hold-m-c")
            div(class="chat-icon hold-m-c")
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.circle-1 {
  width: 130px;
  height: 130px;
  line-height: 130px;
  border-radius: 50%;
  border: 2px solid rgba(255, 63, 62, 0.25);
}
.circle-2 {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(255, 63, 62, 0.75);
  border-radius: 50%;
  text-align: center;
}
.circle-3 {
  width: 70px;
  height: 70px;
  background: rgba(255, 63, 62, 1);
  box-shadow: 0px 8px 10px 0px rgba(255, 62, 63, 0.35);
  border-radius: 50%;
}
.chat-icon {
  width: 39px;
  height: 35px;
  background: url('../../assets/theme/CHAT@2x.png') no-repeat;
  background-position: center center;
}
</style>